<template>
  <el-dialog :close-on-click-modal="false" :title="title" :visible.sync="open" width="600px" append-to-body>
    <el-form ref="form" :model="form" :rules="rules" label-width="auto">
      <el-row>
        <el-col :span="18">
          <el-form-item label="阶段名称" prop="stageName">
            <el-select v-model="form.stageName" placeholder="请选择阶段名称" clearable>
              <el-option
                v-for="dict in dict.type.plan_progress_type"
                :key="dict.value"
                :label="dict.label"
                :value="dict.label"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="项目类型" prop="projectType" v-if="contractSplitTag=='1'">
            <el-select v-model="form.projectType" placeholder="请选择项目类型" clearable>
              <el-option
                v-for="dict in dict.type.project_type"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="(label === '回款' ? '回款' : '支付') + '条件'" prop="paymentCondition">
            <el-input
              v-model="form.paymentCondition"
              :placeholder="'请输入' + (label === '回款' ? '回款' : '支付') + '条件'"
            />
          </el-form-item>

          <el-form-item :label="(label === '回款' ? '回款' : '支付') + '比例'" prop="paymentPercentage">
            <el-input-number
              controls-position="right"
              :step="1"
              :min="0"
              style="width: 150px"
              :precision="2"
              v-model="form.paymentPercentage"
              @change="changePaymentPercentage"
              :placeholder="'请输入' + (label === '回款' ? '回款' : '支付') + '比例'"
            >
            </el-input-number>
            %
          </el-form-item>

          <el-form-item :label="(label === '回款' ? '回款' : '支付') + '状态'" prop="paymentStatus">
            <el-select v-model="form.paymentStatus" :placeholder="'请输入' + (label === '回款' ? '回款' : '支付') + '状态'" clearable>
              <el-option
                v-for="dict in dict.type[label == '回款' ? 'payment_collection_status' : 'plan_status']"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value * 1"
              />
            </el-select>
          </el-form-item>
          <template>
            <el-form-item
              :label="`计划${planType[contractCategory] ? planType[contractCategory].text1 : '支付'}金额`"
              prop="paymentAmount"
              :rules="{
                required: true,
                message: `请输入${planType[contractCategory] ? planType[contractCategory].text1 : '计划支付'}金额`,
                trigger: 'blur',
              }"
            >
              <el-input-number
                controls-position="right"
                :step="100"
                style="width: 150px"
                :precision="2"
                :disabled="checkPermi('biz:contract:information:edit:paymentAmount')"
                v-model="form.paymentAmount"
                placeholder="金额"
                :min="0"
              >
              </el-input-number>
              元
            </el-form-item>
            <el-form-item
              :label="`计划${planType[contractCategory] ? planType[contractCategory].text1 : '支付'}时间`"
              prop="plannedPaymentDate"
              :rules="{
                required: true,
                message: `请选择计划${planType[contractCategory] ? planType[contractCategory].text1 : '支付'}时间`,
                trigger: 'change',
              }"
            >
              <el-date-picker
                v-model="form.plannedPaymentDate"
                value-format="yyyy-MM-dd"
                type="date"
                :placeholder="`选择计划${planType[contractCategory] ? planType[contractCategory].text1 : '支付'}时间`"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item
              v-if="label == '回款' && [6, 7].indexOf(form.paymentStatus) > -1"
              label="开票日期"
              prop="invoicingDate"
              :rules="{
                required: false,
                message: `请选择开票日期`,
                trigger: 'change',
              }"
            >
              <el-date-picker v-model="form.invoicingDate" value-format="yyyy-MM-dd" type="date" placeholder="开票日期">
              </el-date-picker>
            </el-form-item>
          </template>
          <template v-if="(label == '回款' && form.paymentStatus == 7) || (label == '付款' && form.paymentStatus == 2)">
            <el-form-item
              :label="`实际${planType[contractCategory] ? planType[contractCategory].text2 : '支付'}金额`"
              prop="actualPaymentAmount"
              :rules="{
                required: true,
                message: `请输入${planType[contractCategory] ? planType[contractCategory].text2 : '支付'}金额`,
                trigger: 'blur',
              }"
            >
              <el-input-number
                controls-position="right"
                :step="100"
                style="width: 150px"
                :precision="2"
                v-model="form.actualPaymentAmount"
                placeholder="金额"
              >
              </el-input-number>
              元
            </el-form-item>

            <el-form-item
              :label="`实际${planType[contractCategory] ? planType[contractCategory].text2 : '支付'}时间`"
              prop="actualPaymentDate"
              :rules="{
                required: true,
                message: `请选择实际${planType[contractCategory] ? planType[contractCategory].text2 : '支付'}时间`,
                trigger: 'change',
              }"
            >
              <el-date-picker
                v-model="form.actualPaymentDate"
                value-format="yyyy-MM-dd"
                type="date"
                :placeholder="`选择实际${planType[contractCategory] ? planType[contractCategory].text2 : '支付'}时间`"
              >
              </el-date-picker>
            </el-form-item>
          </template>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="open = false">取 消</el-button>
      <el-button type="primary" @click="submitForm">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  name: 'Plan',
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    id: {
      type: String | Number,
      default: '',
    },
    label: {
      type: String,
      default: '',
    },
    contractCategory: {
      type: String | Number,
      default: '',
    },
    dataSource: {
      type: Object,
      default: {},
    },
    contractAmount: {
      type: Number,
      default: '',
    },
    contractSplitTag: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      open: false,
      title: '',
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        stageName: [{ required: true, message: '请输入阶段名称', trigger: 'blur' }],
        paymentCondition: [{ required: true, message: '请输入付款条件', trigger: 'blur' }],
        paymentPercentage: [{ required: true, message: '请输入支付比例', trigger: 'blur' }],
        paymentStatus: [{ required: true, message: '请选择支付状态', trigger: 'change' }],

        actualPaymentDate: [{ required: false, message: '请选择实际支付时间', trigger: 'change' }],
      },
      planType: {
        1: {
          // 销售合同-客户
          text1: '待回款',
          text2: '回款',
        },
        3: {
          // 委外合同-供应商
          text1: '支付',
          text2: '付款',
        },
      },
    }
  },
  dicts: ['plan_status', 'plan_progress_type', 'payment_collection_status','project_type'],
  watch: {
    show: {
      handler(val) {
        this.open = val
      },
    },
    open: {
      handler(val) {
        this.reset()
        if (val) {
          this.title = `${this.dataSource.id ? '修改' : '添加'}${this.label}计划`
          if (this.dataSource) {
            this.form = JSON.parse(JSON.stringify(this.dataSource))
          }
        } else {
          this.$emit('cancel', false)
        }
      },
    },
  },
  methods: {
    // 表单重置
    reset() {
      this.form = {
        id: null,
        stageName: null,
        paymentCondition: null,
        paymentAmount: null,
        paymentPercentage: null,
        plannedPaymentDate: null,
        actualPaymentAmount: null,
        actualPaymentDate: null,
        paymentStatus: null,
      }
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    handleAddMoreInfo() {},
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.$emit('save', { name: 'contractPaymentPlanList', data: JSON.parse(JSON.stringify(this.form)) })
        }
      })
    },
    /** 变更支付比例 */
    changePaymentPercentage() {
      if (this.form.paymentPercentage < 0) {
        this.$modal.msgWarning('请输入[0, 100]以内的数值')
        this.form.paymentPercentage = 1
      }
      if (this.form.paymentPercentage > 100) {
        this.$modal.msgWarning('请输入[0, 100]以内的数值')
        this.form.paymentPercentage = 100
      }
      this.form.paymentAmount = (this.form.paymentPercentage * this.contractAmount) / 100
    },
    checkPermi(per) {
      if (this.dataSource.id) {
        return !this.$auth.hasPermi(per)
      }
      return false
    },
  },
}
</script>
